---
title: Introduction
description: Learn about the headless, composable approach of the @embedpdf/react library.
---

# Headless PDF Components for React

EmbedPDF React is a **headless UI toolkit** for building powerful, fully-customized PDF viewing and editing experiences in React.

Unlike traditional PDF libraries that provide a monolithic, pre-styled `<PDFViewer>` component, `@embedpdf/react` gives you a set of unopinionated hooks and components. This gives you complete control over your application's layout, styling, and functionality.

Think of it like this: instead of a pre-built car, we give you a high-performance engine (`@embedpdf/engines`), a chassis (`<EmbedPDF>`), and a set of quality parts (plugins, hooks, and components) that you assemble to build the exact vehicle you need.

## What Does "Headless" Mean?

1.  **You Control the UI:** We provide the logic, you provide the pixels. The library does not ship with any CSS or pre-built toolbars. You can use any styling solution you prefer, from vanilla CSS and CSS-in-JS to component libraries like Material UI or Tailwind CSS.

2.  **Composable by Design:** You build your viewer by composing components together. Need a render layer? Add `<RenderLayer />`. Want a search UI? Use the `useSearch` hook and build the interface you want. This keeps your component tree clean and your bundle size minimal.

3.  **Total Layout Freedom:** Our components are simple building blocks designed to fit inside *your* application's layout, not the other way around. You decide where the viewport goes, where the sidebar lives, and how the toolbar is structured.

## The Core Building Blocks

Your entire PDF experience is built from a few key concepts:

- **`<EmbedPDF>` Component**: The root provider that manages the core engine and orchestrates all the plugins.
- **Plugins**: These are the "brains" of your viewer, adding features like zooming, scrolling, searching, and more.
- **Hooks**: Functions like `useZoom()` or `useScroll()` that allow your components to read and react to the state of the PDF viewer.
- **Components**: Unstyled, functional components like `<RenderLayer />` and `<Scroller />` that handle the actual rendering and interaction within the DOM.

Ready to get started? Let's build your first viewer!